<template>
    <div class="content">
        <div class="certi-box">
            <div class="certi-ml">
                <img title="一般原产地证" @click="go('C')" :src="c"/>
                <div>
                    一般原产地证
                </div>
            </div>
            <div class="certi-ml">
                <img title="惠普制原产地证书" @click="go('G')" :src="g"/>
                <div>
                    惠普制原产地证书
                </div>
            </div>
            <div class="certi-ml">
                <img title="中国-东欧自贸区原产地证书" @click="go('E')" :src="e"/>
                <div>
                    中国-东欧自贸区原产地证书
                </div>
            </div>
            <div class="certi-ml">
                <img title="亚太贸易协定原产地证书" @click="go('B')" :src="b"/>
                <div>
                    亚太贸易协定原产地证书
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import c from '@/assets/images/c.png'
import b from '@/assets/images/b.png'
import g from '@/assets/images/g.png'
import e from '@/assets/images/e.png'
export default {
    inject: ['nextPageReload'],
    data () {
        return {
            c: c,
            b: b,
            g: g,
            e: e

        }
    },
    methods: {
        go (type) {
            var types = {
                C: 'normalCert',
                B: 'asiaCert',
                G: 'hpCert',
                E: 'chinaCert'
            }
            this.nextPageReload()
            this.$router.push({
                name: types[type],
                query: {
                    type: type
                }
            })
        }
    }

}
</script>
<style scoped>
   .certi-ml{
       display: inline-block;
       float: left;
       margin:10px 10px;
       cursor: pointer;
       width: 96px;
       text-align: center;
       font-weight: 13px;
       color: #0A0A0A;
   }
   .certi-box{
       height: 300px;
   }
</style>
